<template>
  <div class="div">
    <div class="container py-4 px-8">
      <div class="logo text-left">
        <el-image
          :src="'https://imgbed.link/file/15728'"
          :fit="'cover'"
        ></el-image>
      </div>
      <div class="title font-bold text-3xl">注册</div>
      <div class="notice text-gray-400 text-xs mb-8">欢迎来到ZERTOMeta</div>
      <div class="form-container flex justify-center p-4">
        <div class="form">
          <el-form
            ref="registerForm"
            status-icon
            :rules="rules"
            label-width="80px"
            :model="registerForm"
            label-position="labelPosition"
            class="demo-ruleForm"
          >
            <el-form-item label="用户名" prop="username">
              <el-input
                v-model="registerForm.username"
                placeholder="请输入您的用户名"
              ></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="name">
              <el-input
                v-model="registerForm.name"
                placeholder="请输入您的昵称"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="registerForm.password"
                placeholder="请输入您的密码"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPassword">
              <el-input
                v-model="registerForm.checkPassword"
                placeholder="请再次输入您的密码"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item label="支付密码" prop="tradingPassword">
              <el-input
                v-model="registerForm.tradingPassword"
                placeholder="请输入您的支付密码"
                oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                show-password
              ></el-input>
            </el-form-item>
          </el-form>
          <div class="tip">
            <span class="text-red-700">{{ registerTip }}</span>
          </div>
          <div class="button">
            <button class="rounded-xl my-8" @click="gistercheckout()">
              注册
            </button>
          </div>
        </div>
      </div>
      <div class="login text-right flex justify-end">
        已有账户？<button class="text-white px-4" @click="toLogin">
          立即登录
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    var validateUsernameName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("用户名不能为空"));
      } else {
        callback();
      }
    };
    var validateName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("昵称不能为空"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value != this.registerForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      registerForm: {
        username: "",
        name: "",
        password: "",
        checkPassword: "",
        tradingPassword: "",
      },
      labelPosition: "top",
      rules: {
        username: [
          { validator: validateUsernameName, required: true, trigger: "blur" },
        ],
        name: [{ validator: validateName, required: true, trigger: "blur" }],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { min: 8, message: "长度最少为8个字符", trigger: "blur" },
        ],
        checkPassword: [{ validator: validatePass, trigger: "blur" }],
        tradingPassword: [
          { required: true, min: 6, message: "长度为6的数字", trigger: "blur" },
        ],
      },
      registerTip: "",
    };
  },
  methods: {
    //用户注册表单验证
    gistercheckout(value) {
      console.log(this.$refs["registerForm"].validate);
      this.$refs["registerForm"].validate((valid) => {
        if (valid) {
          console.log("表单验证通过");
          this.checkoutRegister();
        } else {
          console.log(valid);
          console.log("error.submit!!");
          return false;
        }
      });
    },

    //用户验证
    checkoutRegister() {
      this.$axios
        .postInfo("/queryRegister", { username: this.registerForm.username })
        .then((res) => {
          console.log();
          if (res.state == false) {
            this.registerTip = "用户已存在";
            return { state: 0 };
          } else if (res.state == true) {
            this.registerTip = "";
            return this.$taxios.register( this.registerForm);
          }
        })
        .then((res) => {
          console.log(res);
          if (res.state == 1) {
            let user = res;
            this.open4();
            this.$router.replace("/mine");
          }
        });
    },
    register() {
      console.log("发送注册请求");
    },
    toLogin() {
      this.$router.push("/login");
    },
    open4() {
        this.$message.promptBox("注册成功","success")
    },
  },
};
</script>

<style lang="less" scoped>
.div {
  padding-top: 150px;
  width: 100%;

  .container {
    background: #fff;
    box-shadow: 0 2px 16px 0 hsl(0deg 0% 71% / 40%);
    border-radius: 4px;
    min-height: 70vh;
    margin-bottom: 10rem;
    max-width: 768px;

    .logo {
      position: relative;
      height: 50px;

      .el-image {
        height: 100%;
      }
    }

    .form-container {
      .form {
        width: 50%;

        // .input-box {
        //     input {
        //         border-bottom: 1px solid black;
        //         outline: none;
        //         margin: .5rem 0;
        //     }
        // }
        /deep/ input {
          border: none;
          border-bottom: 1px solid gray;
          border-radius: 0%;
        }

        /deep/ .el-form-item {
          // margin: 12px;
        }

        .button button {
          border: 1px solid gray;
          padding: 0.3rem 2rem;
          transition: 0.5s;
          color: black;
        }

        .button button:hover {
          border: 1px solid #2469e5;
          background: #2469e5;
          color: #fff;
        }
      }
    }

    .login {
      button {
        background: black;
      }
    }
  }
}
</style>